<template>
	<view class="page">
		<view class="header-box" :style="{ paddingTop: winInfo.top + 'px' }">
			<view class="search-box">
				<image src="/static/images/find/search.png" style="width: 36rpx" mode="widthFix"></image>
				<input type="text" v-model="searchInfo" placeholder="搜索活动" @confirm="searchHD" />
			</view>
		</view>
		<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" class="swipe-container">
			<swiper-item v-for="(item, index) in BannerInfo">
				<image :src="Microi.FileServer + item.Tupian" mode="aspectFill" class="banner-pic"></image>
			</swiper-item>
		</swiper>
		<view class="container">
			<!-- 排序 -->
			<view class="paixu-Container">
				<view class="paixu-box" v-for="(item, index) in paixuTabs">
					<view>{{ item.name }}</view>
					<image
						src="/static/images/huodong/sort.png"
						mode="widthFix"
						v-if="item.sort > 0 && index != 0"
						:style="{ transform: item.sort == 2 ? 'scale(-1)' : 'scale(1)' }"
					></image>
				</view>
			</view>
			<!-- 活动 -->
			<view class="huodong-box" v-for="item in HDInfo.Data" @tap="goHDDetail(item)">
				<view class="huodong-line">
					<view class="huodong-name">
						{{ item.Biaoti }}
					</view>
				</view>
				<view class="huodong-line">
					<image :src="item.Avatar || '/static/images/my/noAvatar.svg'" mode="aspectFill" class="avatar-img"></image>
					<view>{{ item.Name || '暂无昵称' }}</view>
				</view>
				<view class="huodong-line">
					<view class="HD-Type">{{ computeHDType(item) }}</view>
					<view class="HD-time">
						<view>{{ computeHDTime(item.HuodongSJ) }}</view>
						<view>|</view>
						<view>{{ item.XiangxiDZ }}</view>
					</view>
				</view>
				<scroll-view scroll-x="true" style="display: inline-flex; white-space: nowrap; gap: 16rpx">
					<image v-for="(val,index) in JSON.parse(item.TupianMS)" :key="index" :src="Microi.FileServer + val.Path" mode="aspectFill" class="hd-img"></image>
				</scroll-view>
				<view class="huodong-line" style="justify-content: space-between">
					<view class="joinUser-List">
						<image v-for="(val,index) in item.joinUser" :key="index" :src="val.Avatar" mode="aspectFill" class="join-avatar"></image>
						<view class="" v-if="item.joinUser.length">{{ item.joinUser.length }}人报名</view>
					</view>
					<view class="join-btn">上车</view>
				</view>
			</view>
		</view>
	</view>

	<!-- 导航栏 -->
	<tabbar currentTab="1" />
</template>

<script>
import tabbar from '/model/tabbar.vue';
export default {
	components: {
		tabbar
	},
	data() {
		return {
			Islogin: this.Microi.IsLogin(),
			CurrentUser: this.Microi.GetCurrentUser(),
			winInfo: {
				height: 64, //header高度
				top: 26, //标题图标距离顶部距离
				scrollH: 0 //滚动总高度
			},
			startTime: 0,
			options: {},
			searchInfo: '',
			BannerInfo: [],
			HDInfo: {
				page: 1,
				noData: false,
				Data: []
			},
			paixuTabs: [
				{
					name: '综合'
				},
				{
					name: '时间',
					sort: 0
				},
				{
					name: '地点',
					sort: 1
				}
			]
		};
	},
	mounted() {
		let obj = {};
		// #ifdef MP-WEIXIN
		obj = wx.getMenuButtonBoundingClientRect();
		// #endif
		// #ifdef MP-BAIDU
		obj = swan.getMenuButtonBoundingClientRect();
		// #endif
		// #ifdef MP-ALIPAY
		my.hideAddToDesktopMenu();
		// #endif

		setTimeout(() => {
			uni.getSystemInfo({
				success: (res) => {
					this.winInfo = res;
					this.winInfo.width = obj.left || res.windowWidth;
					this.winInfo.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;
					this.winInfo.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
					this.winInfo.scrollH = res.windowWidth;
				}
			});
		}, 0);
	},

	onLoad(options) {
		this.options = options;
		this.getHDBanner();
		this.getHDList();
	},
	onShow() {
		this.startTime = new Date();
	},
	onHide() {
		if (this.Islogin) {
			// 获取当前页面栈
			const pages = getCurrentPages();
			// 获取当前页面的对象
			const currentPage = pages[pages.length - 1];
			// 获取当前页面的路径
			const route = currentPage.route;
			// 获取当前页面的参数
			const options = currentPage.options;
			this.Microi.ApiEngine.Run('Add_liulanLog', {
				YemianCS: options,
				YemianDZ: route,
				LiulanSJC: new Date().getTime() - this.startTime.getTime()
			});
		}
	},
	onUnload() {
		if (this.Islogin) {
			// 获取当前页面栈
			const pages = getCurrentPages();
			// 获取当前页面的对象
			const currentPage = pages[pages.length - 1];
			// 获取当前页面的路径
			const route = currentPage.route;
			// 获取当前页面的参数
			const options = currentPage.options;
			this.Microi.ApiEngine.Run('Add_liulanLog', {
				YemianCS: options,
				YemianDZ: route,
				LiulanSJC: new Date().getTime() - this.startTime.getTime()
			});
		}
	},
	methods: {
		async getHDBanner() {
			var self = this;
			var res = await self.Microi.ApiEngine.Run('customize_crud', {
				EngineKey: 'KEY000009'
			});
			this.BannerInfo = res.Data;
		},
		searchHD() {
			this.HDInfo.page = 1;
			this.HDInfo.noData = false;
			this.getHDList();
		},
		computeHDType(item) {
			var HuodongSJ = new Date(item.BaomingJZSJ).getTime();
			var TimeNow = new Date().getTime();
			var baomingCount = item.baomingCount;
			var CanyuRS = item.CanyuRS;
			if (HuodongSJ > TimeNow && baomingCount < CanyuRS) {
				return '报名中';
			} else if (HuodongSJ > TimeNow && baomingCount >= CanyuRS) {
				return '已满员';
			} else if (HuodongSJ <= TimeNow) {
				return '已结束';
			}
		},
		computeHDTime(DataInfo) {
			var time = new Date(DataInfo);
			var year = time.getFullYear();
			var month = time.getMonth() + 1;
			if (month < 10) month = `0${month}`;
			var day = time.getDate();
			if (day < 10) day = `0${day}`;
			var xingqi = time.getDay();
			var XingqiArray = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
			xingqi = XingqiArray[xingqi];

			return `${year == new Date().getFullYear() ? '' : year} ${month}月${day}日 ${xingqi} ${DataInfo.split(' ')[1]}`;
		},
		async getHDList() {
			var self = this;
			var res = await self.Microi.ApiEngine.Run('huodong_List', {
				page: self.HDInfo.page,
				searchInfo: self.searchInfo
			});
			if (self.HDInfo.page == 1) {
				self.HDInfo.Data = res.Data;
			} else {
				self.HDInfo.Data.push(...res.Data);
			}
			if (!res.Data.length) {
				self.HDInfo.noData = true;
			}
			self.HDInfo.page++;
		},
		goBack() {
			let pages = getCurrentPages(); // 获取当前页面堆栈
			let pageCount = pages.length; // 页面堆栈中的页面数量
			// 判断是否有上级页面
			if (pageCount > 1) {
				// 如果有上级页面，则返回上级页面
				uni.navigateBack({
					delta: 1
				});
			} else {
				// 如果没有上级页面，则返回首页
				uni.switchTab({
					url: '/pages/tabbar/find/find' // 替换为你的首页路径
				});
			}
		},
		goHDDetail(item) {
			uni.navigateTo({
				url: `/packageA/activityDetail/activityDetail?id=${item.Id}`
			});
		}
	},
	onReachBottom() {
		if (!this.HDInfo.noData) {
			this.getHDList();
		} else {
			this.Microi.Tips('暂无更多活动', false);
		}
	},
	onPullDownRefresh() {
		this.HDInfo.page = 1;
		this.HDInfo.noData = false;
		this.getHDList();
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	}
};
</script>

<style>
.page {
	padding: 0 0 150rpx 0;
	box-sizing: border-box;
	position: relative;
}
page {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 50%, #f4f5f6 100%) no-repeat;

	color: #000;
}

.header-box {
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 999;
	padding: 0 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
}
.search-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 18rpx;

	width: 390rpx;
	height: 64rpx;
	background: #ffffff;
	border-radius: 130rpx 130rpx 130rpx 130rpx;
	padding: 14rpx 26rpx;
	box-sizing: border-box;
}
.search-box input {
	font-family: PingFang SC, PingFang SC;
	font-size: 28rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.swipe-container {
	width: 100%;
	height: 600rpx;
	position: relative;
	overflow: hidden;
}
.swipe-container::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 20%; /* 渐隐区域的高度 */
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /* 从透明到白色渐变 */
}
.banner-pic {
	height: 100%;
	width: 100%;
	z-index: -1;
}
.container {
	z-index: 1;
	margin-top: -50rpx;
	padding: 54rpx 16rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	gap: 16rpx;
}
.paixu-Container {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 32rpx;
}
.paixu-box {
	width: 128rpx;
	height: 52rpx;
	background: #f4f5f6;
	border-radius: 124rpx 124rpx 124rpx 124rpx;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10rpx;

	font-family: PingFang SC, PingFang SC;
	font-size: 28rpx;
	color: #444444;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.paixu-box image {
	width: 20rpx;
}
.joinUser-List{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 16rpx;
}
.join-avatar{
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
}
.huodong-box {
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	gap: 13rpx;
	padding: 24rpx 20rpx;
	box-sizing: border-box;
	width: 718rpx;
	background: #ffffff;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
}
.huodong-line {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 16rpx;
	font-family: PingFang SC, PingFang SC;
	font-size: 24rpx;
	color: #666666;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.huodong-name {
	height: 44rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 800;
	font-size: 32rpx;
	color: #333333;
	text-align: left;
	font-style: normal;
	text-transform: none;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
}
.avatar-img {
	width: 32rpx;
	height: 32rpx;
	border-radius: 50%;
}
.HD-Type {
	width: 104rpx;
	height: 40rpx;
	background: #ffe9ea;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	line-height: 40rpx;
	font-family: PingFang SC, PingFang SC;
	font-size: 28rpx;
	color: #fb353b;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.HD-time {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 16rpx;
	height: 34rpx;
	font-family: PingFang SC, PingFang SC;
	font-size: 24rpx;
	color: #212121;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.hd-img {
	width: 220rpx;
	height: 216rpx;
	margin-right: 16rpx;
}
.join-btn {
	width: 128rpx;
	height: 56rpx;
	background: #fb353b;
	border-radius: 120rpx 120rpx 120rpx 120rpx;

	font-family: PingFang SC, PingFang SC;
	/* font-weight: 800; */
	font-size: 28rpx;
	color: #ffffff;
	line-height: 56rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.no-Data {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-size: 25rpx;
	color: #999999;
	margin: auto;
	margin-top: 200rpx;
}
.no-Data image {
	width: 400rpx;
}
</style>
